<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        // 第一个问题
        // console.log(1);

        // setTimeout(function(){
        //     console.log(3);
        // },1000);

        // console.log(2);

        // 2.第二个问题 定时器会在触发的时候，放入消息队列
        // console.log(1);

        // setTimeout(function(){
        //     console.log(3);
        // },0);

        // console.log(2);

        // 3.第三个问题，点击或定时器触发时才放入消息队列

        // console.log(1);
        // document.onclick = function () {
        //     console.log('click');
        // };
        // console.log(2);
        // setTimeout(function(){
        //     console.log(3);
        // },3000);

        /*
            线程 Thread：执行运算最小单位。一个理发师。
            进程 Process：一个应用程序(QQ、酷狗、浏览器)一个进程。一个理发店。

            JavaScript 语言的一大特点就是单线程，也就是说，同一时间只能做一件事情。
            单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。

            这样就导致的问题是：如果 JS执行的时间过长，这样就会造成页面的渲染不连贯，
            导致页面渲染加载阻塞的感觉。

            同步和异步：
                为了解决这个问题，利用多核CPU的计算能力，
                HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程。
                于是，JS中出现了同步和异步

                同步与异步
                    同步交互：指发送一个请求，需要等待返回，然后才能够发送下一个请求，有个等待过程；
                    异步交互：指发送一个请求，不需要等待返回，随时可以再发送下一个请求，即不需要等待。

                    同步就相当于是当客户端发送请求给服务端，在等待服务端响应请求时，客户端不做其他的事情。
                        当服务端做完了才返回到客户端。这样的话 客户端需要一直等待。用户使用起来会有不友好。
                    异步就是，当客户端发送给服务端请求时，在等待服务端响应的时候，客户端可以做其他的事情，这样节约了时间，提高了效率。
                同步异步案例
                    举个例子，一家餐厅来了5个客人，同步的意思是说，来第一个点菜，点了个鱼，好，厨师去捉鱼杀鱼，过了半个小时鱼好了
                    给第一位客人，开始下位客人，就这样一个一个，按顺序来相同，
                    异步是，来第一位客人，点什么，点鱼，给他一个牌子，让他去一边等吧，下一位客人接着点菜，点完接着让厨师去做，哪个菜先做好就先端出来。
            同步任务
                同步任务都在主线程上执行，形成一个执行线。
            异步任务
                JS的异步是通过回调函数实现的。
                一般而言，异步任务有以下三种类型：
                1.普通时间，如 click，resize等
                2.资源加载，如 load、error等
                3.定时器，包括 setInterval，setTimeout 等。
            异步任务相关回调函数添加到任务队列中(任务队列也称为消息队列)。
            
            JS执行机制
                1.先执行执行栈中的同步任务。
                2.异步任务(回调函数)放入任务队列中。
                3.一旦执行栈中的所有所有同步任务执行完毕，
                   系统就会按次序读取任务队列中的异步任务，
                   于是被读取的异步任务结束，结束等待状态，
                   进入执行栈(即放到执行栈的最后)，开始执行。
                4.类似异步任务放入高速的服务区。
            同步任务执行完毕后，将再次获取任务队列，放入同步任务，继续执行。
            由于主线程不断地重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环(event loop)
        */       
    </script>
</body>
</html>